<style>
.charge-container{
	display: flex;
	/* flex: 1; */
	width: 100%;
}
.charge-box,.charge-wrapper{
	display: flex;
	/* flex: 1; */
	width: 100%;
}
.charge-wrapper{
	flex-direction: column;
	align-items: center;
}
.charge-box{
	flex-direction: column;
}
.charge-title{
	margin: 40upx 0;
}
.charge-list{
	margin: 0 0 40upx 0;
	padding: 0 40upx;
	display: flex;
	/* flex: 1; */
	width: 100%;
	justify-content: space-between;
    flex-wrap: wrap;
	box-sizing: border-box;
}
.charge-item{
	margin-bottom: 40upx;
    padding: 20upx 0;
    width: 30%;
    text-align: center;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 8upx;
}
.charge-item.active{
	background: #1989FA;
	color: #fff;
}
.charge-btn{
	width: 100%;
	font-size: 34upx;
	background: #4cd964;
	color: #fff;
}
.charge-btn.alipay-btn{
	background: #007aff;
	margin-top: 30upx;
}
.btn-box{
	margin: 0 40upx;
}
.orange{
	color: orange;
	margin: 40upx 0 -30upx 0;
}
</style>

<template>
	<view class="charge-container">
		<div class="charge-box">
			<div class="charge-wrapper">
				<div v-if="chargeFlag" class="orange">您的充值金不足，请充值</div>
				<div class="charge-title">选择充值金数量</div>
				<div class="charge-list">
					<div class="charge-item" :class="{active:activeIndex==index}" v-for="(item,index) in list" @click="changeIndex(item,index)" :key="index">{{item}}</div>
				</div>
				
			</div>
			<div class="btn-box">
			    <button type=""  class="charge-btn" @click="wxpay">微信充值</button>
			    <button type=""  class="charge-btn alipay-btn" @click="alipay">支付宝充值</button>
			</div>
		</div>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				list:[
					5,10,20,30,50,100
				],
				activeIndex:-1,
				chargeNum:0,
				chargeFlag:0
			};
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods:{
			changeIndex(item,index){
				this.activeIndex = index
				this.chargeNum = item
			},
			wxpay(){
				let that = this
				let uid = this.userInfo.uid
				if(!this.chargeNum){
					uni.showToast({
						title: '请选择充值数量',
						icon: 'none',
						mask: true
					})
					return
				}
				uni.request({
					url: this.httpUrl + 'wPay/goPay',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid	:uid,
						balance:that.chargeNum
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
						   let payJson = JSON.stringify(res.data.data)
						   that.pay(payJson,'wxpay')
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			alipay(){
				let that = this
				let uid = this.userInfo.uid
				if(!this.chargeNum){
					uni.showToast({
						title: '请选择充值数量',
						icon: 'none',
						mask: true
					})
					return
				}
				uni.request({
					url: this.httpUrl + 'aliPay/goPay',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid	:uid,
						balance:that.chargeNum
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
						   // let payJson = JSON.stringify(res.data.data)
						   let payJson = res.data.data
						   that.pay(payJson,'alipay')
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})				
			},
			pay(payJson,payType){
// 				console.log(payJson);
// 				uni.showToast({
// 					title:payJson
// 				})
				uni.requestPayment({
					provider: payType,
					orderInfo: payJson, 
					success: function (res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
// 						uni.showModal({
// 							title:'',
// 							content:JSON.stringify(err)
// 						})
					}
				});
			}
		},
		onLoad(options) {
			this.chargeFlag = options.charge ? options.charge : 0
		}
	}
</script>
